<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.DateFormat"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="nuffzone.*"%>


<html>

<head>
<title>Nuffzone-Home</title>

<link type="text/css" rel="stylesheet" href="/stylesheets/common.css" />
<link type="text/css" rel="stylesheet" href="/stylesheets/recipes.css" />
<link type="text/css" href="/stylesheets/menu.css" rel="stylesheet" />
<link type="text/css" href="/stylesheets/jquery-bubble-popup-v3.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/recipes.js" charset="UTF-8"></script>
<script type="text/javascript" src="scripts/rsa.js"></script>
<script type="text/javascript" src="scripts/menu.js"></script>
<script type="text/javascript" src="scripts/jquery-bubble-popup-v3.min.js"></script>

<%
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
%>


</head>
<body>
	<div id="pageHeader">
		<div id="usernameTopDiv">
			<p id="usernameText">
				<%
					if (user != null) {
				%>
				<%=user.getNickname()%>
				<%
					}
				%>
			</p>
		</div>
		<div id="navigationBar">
			<div id="navHome" class="navigation-div">
				<div id="nav-icon-home" class="navIcon"></div>
				<div class="navText">Homepage</div>
			</div>
			<div id="navSchedule" class="navigation-div">
				<div id="nav-icon-schedule" class="navIcon"></div>
				<div class="navText">Schedule</div>
			</div>
			<div id="navRSA" class="navigation-div">
				<div id="nav-icon-rsa" class="navIcon"></div>
				<div class="navText">Cryptografie</div>
			</div>
			<div id="navRecipe" class="navigation-div">
				<div id="nav-icon-rsa" class="navIcon"></div>
				<div class="navText">Recipes</div>
			</div>
		</div>
		<div id="dateTopDiv">
			<p id="dateText">
				<%
					Date today;
					String dateOut;
					DateFormat dateFormatter;
					dateFormatter = DateFormat.getDateInstance(DateFormat.DEFAULT);
					today = new Date();
					dateOut = dateFormatter.format(today);
				%>
				<%=dateOut%></p>
		</div>
	</div>
	<div id="middleSectionContainer">
		<div id="middleSection">
			<div id="menu" class="recipes-navigation-div">
				<ul class="menu">
					<li><a href="#" id="recipes-navigation-item-overview"
						class="parent"><span>My Recipes</span></a></li>
					<li><a href="#" id="recipes-navigation-item-selectCategory"
						class="parent"><span>Select Category</span></a>
						<div>
						<!--  
						CREATION OF LIST OF CATEGORIES IN THE SELECT CATEGORY NAVIGATION
						 -->
							<ul id="recipes-navigation-categoriesList">
								<%
									categoriesManager CM = categoriesManager.getInstance();
									ArrayList<String> categoriesList = new ArrayList<String>();
									if (user != null) {
										categoriesList = CM.getCategoriesOfUser(user);
									}
									if (categoriesList.size() == 0) {
								%>
								<li><a href="#"><span>You don't have any
											categories yet!</span></a></li>
								<%
									} else {
										for (String category : categoriesList) {
								%>
								<li><a href="#"><span class="recipes-navigation-categoriesList-item"><%=category%></span></a></li>
								<%
									}
									}
								%>
								<li><a href="#"><span
										id="recipes-navigation-manageCategories">Manage
											Categories</span></a></li>
							</ul>
						</div></li>
					<li><a href="#" id="recipes-navigation-item-add"><span>Add
								Recipe</span></a></li>
					<li class="last"><a href="#"
						id="recipes-navigation-item-search"><span>Search</span></a></li>
				</ul>
			</div>
			<div id="recipes-overview" class="recipes-content-container">
				<div class="recipes-overview-container">
				<!--  
					CATEGORIES AND RECIPES IN OVERVIEW PAGE MY RECIPES
				-->
					<%
						for (String category : categoriesList) {
					%>
					<div class="recipes-category-div">
						<div class="recipes-category-name"><%=category%></div>
						<div class="recipes-listContainer">
							<ul>
								<%
									recipeManager RM = recipeManager.getInstance();
										ArrayList<Recipe> recipeList = new ArrayList<Recipe>();
										recipeList = RM.getAllUserRecipesOfCategory(user, category);
										for (Recipe recipe : recipeList) {
								%>
								<li class="recipes-item"><%=recipe.getTitle()%></li>
								<%
									}
								%>
							</ul>
						</div>
					</div>
					<%
						}
					%>
				</div>
				<div class="recipes-selected-container">
					<div class="recipes-selected-title">
						<div class="recipes-selected-title-text"></div>
						<div class="recipes-selected-title-deleteRecipe-div"></div>
					</div>
					<%
						if (user != null) {
							if (categoriesList.isEmpty()) {
					%>
							Please create a new category by clicking 'Select Category'>'Manage Categories'.</br>
							You can then start creating new recipes by clicking 'Add Recipe'.</br></br>
							Enjoy :)
					<%
							}
						} else {
					%>
					<p>
						Hello! <a
							href="<%=userService.createLoginURL(request.getRequestURI())%>">Please,
							sign in</a>
					</p>
					<%
						}
					%>
					<div class="recipes-selected-ingredients-div">
						<div class="recipes-selected-ingredients-listContainer"></div>
					</div>
					<div class="recipes-selected-description-div">
						<div class="recipes-selected-description-text"></div>
					</div>
				</div>
			</div>
			<!--  
			ADD A NEW RECIPE
			-->
			<div id="recipes-add" class="recipes-content-container">
				<form id="recipes-form" action="recipeServlet" method="post">
					<input type="hidden" name="request" value="createRecipe" />
					<div class="recipes-form-header">Create a new recipe</div>
					<div class="recipes-form-item">
						<div class="recipes-form-item-title">Recipe name:</div>
						<div class="recipes-form-item-input">
							<input type="text" name="name" size="105" maxlength="80" />
						</div>
						<select id="recipes-selectCategory" size="1" name="category">
							<option class="recipes-selectCategory-categoryItem" value="null">Select
								a category...</option>
							<%
								for (String category : categoriesList) {
							%>
							<option class="recipes-selectCategory-categoryItem"
								value="<%=category%>">
								<%=category%>
							</option>
							<%
								}
							%>
						</select>
					</div>



					<div class="recipes-form-item">
						<div class="recipes-form-ingredients-container">
						<div class="recipes-form-ingredients-header">
							<div id="recipes-form-ingredients-descriptiontag">Ingredient
								description</div>
							<div id="recipes-form-ingredients-quantitytag">Quantity</div>
						</div>
						<input type="hidden" name="nbOfIngredients" value="1" />
						<div class="recipes-form-item-title">Ingredient:</div>
						<div class="recipes-form-item-input" id="recipes-form-ingredient-inputList-div">
							<input type="text" class="ingredient-input" name="ingredient1name" size="80"	maxlength="70" /><input type="text" name="ingredient1quantity"	size="20" maxlength="18" />
						</div>
						<div class="recipes-form-ingredients-addIngredient-container">
						<div id="recipes-form-ingredients-addIngredient-button-div"></div>
						<div id="recipes-form-ingredients-addIngredient-text"> Add another ingredient</div>
						</div>
						</div>
					</div>
					<div class="recipes-form-item">
						<div class="recipes-form-item-title">Description:</div>
						<div class="recipes-form-item-textarea">
							<textarea name="description" id="description" maxlength="1600"
								rows="20" cols="107"></textarea>
						</div>
					</div>
					<div id="recipes-form-submit">
						<input type="submit" value="Create!" />
					</div>
				</form>
			</div>
			<!--  
			MANAGE CATEGORIES
			-->
			<div id="recipes-manageCategories" class="recipes-content-container">
				<div class="recipes-manageCategories-header">Manage Categories</div>
				<div class="recipes-manageCategories-categoriesList">
					<%
						for (String category : categoriesList) {
					%>
					<div class="recipes-manageCategories-categoryItem">
						<%=category%>
					</div>
					<%
						}
					%>
				</div>
				<div class="recipes-manageCategories-right-div">
					<div class="recipes-manageCategories-addCategory-div">
						<form id="categories-form" action="categoryServlet" method="post">
							<div class="recipes-manageCategories-addCategory-text">Add
								category:</div>
							<input id="recipes-manageCategories-addCategory-input"
								type="text" name="categoryName" size="40" maxlength="40" /> <input
								type="hidden" name="request" value="addCategory" />
							<div id="categories-form-submit">
								<input type="submit" value="Add" />
							</div>
						</form>
						<div class="recipes-manageCategories-removeCategory-div">
							<div class="recipes-manageCategories-addCategory-text">Remove
								selected category:</div>
							<button id="recipes-manageCategories-removeCategory-button">Remove</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>